<template>
    <div class="order">
        <van-nav-bar fixed title="购物车" left-arrow @click-left="back()" />
        <page>
            <div class="order-list">

                <!--代付款订单列表-->
                <van-card v-for="(item, index) in state.waitPayOrderList" :num="item.goods_num" :key="index"
                    :price="item.wares_nowprice" :desc="item.wares_info" :title="item.wares_title"
                    :thumb="item.wares_masterimg && item.wares_masterimg[0]" />

                <van-cell-group>
                    <van-cell title="配送方式" value="顺丰配送货（免运费）" />
                    <van-cell title="发票类型" value="电子发票" />
                    <van-cell title="优惠券" value="无" />
                </van-cell-group>

                <van-cell-group title="支付方式" v-model="select">

                    <van-cell title="微信支付">
                        <template #icon>
                            <img src="/img/pay_wx.png" alt="微信支付">
                        </template>
                        <template #right-icon>
                            <van-radio disabled></van-radio>
                        </template>
                    </van-cell>

                    <van-cell title="支付宝支付">
                        <template #icon>
                            <img src="/img/pay_zfb2.png" alt="支付宝支付">
                        </template>
                        <template #right-icon>
                            <van-radio name="1" disabled></van-radio>
                        </template>
                    </van-cell>

                    <van-cell title="花呗分期">
                        <template #icon>
                            <img src="/img/pay_antinstalment.png" alt="花呗分期">
                        </template>
                        <template #right-icon>
                            <van-radio disabled></van-radio>
                        </template>
                    </van-cell>

                    <van-cell title="银联支付">
                        <template #icon>
                            <img src="/img/pay_yl1.png" alt="银联支付">
                        </template>
                        <template #right-icon>
                            <van-radio disabled></van-radio>
                        </template>
                    </van-cell>

                </van-cell-group>

            </div>

            <!--底部固定的付款按钮-->
            <van-submit-bar :price="TotalMoney" button-text="去付款" @submit="GoPlay" />
        </page>
    </div>
</template>
 
<script setup lang="ts">
import { onMounted, reactive, ref, computed, onUnmounted, getCurrentInstance } from "vue";
import { useRouterAction } from "@/utils/router";
import { allOrder, buyOrder } from "@/serve/_";
import { OrderType } from "@/types/res/order";

const { back, push } = useRouterAction()
const select = ref(0)
const state: {
    waitPayOrderList: OrderType[]
} = reactive({
    waitPayOrderList: []
})

onMounted(() => {
    getAllOrder()
})

let TotalMoney = computed(() => {
    let total: number = 0
    state.waitPayOrderList.forEach(v => {
        total += Number(v.goods_totalprice)
    })

    return total * 100
})

let GoPlay = async () => {
    await buyOrder({
        goodsid: JSON.stringify(state.waitPayOrderList.map(v => {
            return v.goods_id
        }))
    })
    push({ name: "orderStatus" });
}

let getAllOrder = async () => {
    state.waitPayOrderList = await allOrder({
        status: '0'
    })

    console.log(state.waitPayOrderList);

}
</script>
 
<style lang="less" scoped>
.van-cell img {
    width: 0.8rem;
    margin-right: 0.26667rem;
}
</style>
 